<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>

</head>
<body style="background-color: #eee;padding: 15px">
<div class="layui-card">
    <div class="layui-card-body">
            <span class="layui-breadcrumb">
                <a href="javascript:;">菜单管理</a>
                <a><cite>菜单列表</cite></a>
            </span>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table lay-filter="dataTable" id="dataTable"></table>
    </div>
</div>
</body>
<script>
    layui.use(['treeTable'], function () {
        const treeTable = layui.treeTable;
        /*渲染table表格*/
        treeTable.render({
            elem: "#dataTable",/*指定渲染的元素*/
            /*该地址采取children方案，需要后台使用递归处理好菜单数据*/
            // url: "menu/power",/*请求地址*/
            /*该地址采取平铺数据加载（使用parentId对应关系）的方案实现，需要再tree.data中设置isSimpleData属性为true*/
            url: "menu/page",
            parseData(res) {
                return {
                    code: res.code === 200 ? 0 : res.code,
                    msg: res.msg,
                    data: res.data
                }
            },
            tree: {
                customName: {
                    id: "menuId"
                },
                view: {
                    showIcon: false,/*是否显示自带图标*/
                    // expandAllDefault: true/*是否展开所有节点*/
                },
                data: {
                    /*地址为menu/power时该内容需要设置为false*/
                    isSimpleData: true,
                    rootPid: 0
                }
            },
            /*数据内容设置*/
            cols: [[
                {field: "menuId", title: "编号"},
                {field: "name", title: "名称"},
                {
                    field: "type", title: "类型", templet: function (d) {
                        switch (d.type) {
                            case 1:
                                return "父节点";
                            case 2:
                                return "子节点";
                            case 3:
                                return "按钮";
                            default:
                                return "异常";
                        }
                    }
                },
                {field: "href", title: "跳转地址"},
                {
                    field: "icon", title: "图标", templet: function (d) {
                        if (d.icon) {
                            return '<i class="layui-icon ' + d.icon + '">' + d.icon + '</i>'
                        }
                        return '';
                    }
                },
                {
                    field: "power", title: "权限", templet: function (d) {
                        let powers = d.power.split(",")
                        let powerText = [];
                        for (let p of powers) {
                            switch (p) {
                                case "1":
                                    powerText.push("管理员")
                                    break;
                                case "2":
                                    powerText.push("负责人")
                                    break;
                                case "3":
                                    powerText.push("员工")
                                    break;
                                case "4":
                                    powerText.push("司机")
                                    break;
                            }
                        }
                        return powerText.toString();
                    }
                }
            ]]
        });
    })

</script>
</html>
